<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="icon" href="img/片1.ico" type="images/x-ico" />	
		<style>
				body{margin: 0;
				padding: 0;
				background-image: url(img/tomas-nozina-2ReCTE531ZQ-unsplash.jpg);
		        background-repeat: no-repeat;
		        background-position: center center;
		        background-attachment: fixed;
                background-size: cover; }
                img:hover{border:10px solid black ;width: 50%;}
.div1{
	background-image: url(img/图片2.png);
	    background-position: center center;
			border-width: 2px 2px 2px 2px;
			border-color: black;
			border-style: ;
			width:1500px;
			height:400px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin: 50px auto;
}
.div2{
	/*background-image: url(img/图片2.png);*/
	    background-position: center center;
			border-width: 2px 2px 2px 2px;
			border-color: black;
			border-style: ;
			width:800px;
			height:300px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin: 50px auto;
}
.div3{
	/*background-image: url(img/图片2.png);*/
	    background-position: center center;
			border-width: 2px 2px 2px 2px;
			border-color: black;
			border-style: ;
			width:1000px;
			height:700px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin: 50px auto;
}
.div4{
	/*background-image: url(img/图片2.png);*/
	    background-position: center center;
			border-width: 2px 2px 2px 2px;
			border-color: black;
			border-style: ;
			width:800px;
			height:300px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin: 0 auto;
}
.divf{
	/*background-image: url(img/图片2.png);*/
	    background-position: center center;
	    background-color: #00FFFF;
			border-width: 2px 2px 2px 2px;
			border-color: black;
			border-style: ;
			width:30px;
			height:30px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin: 0 0;
			float:left;
}
.divf2{
	/*background-image: url(img/图片2.png);*/
	    background-position: center center;
	    background-color: aqua;
			border-width: 2px 2px 2px 2px;
			border-color: black;
			border-style: ;
			width:50px;
			height:50px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin: 0 0;
			float:left;
}
.divf3{
	/*background-image: url(img/图片2.png);*/
	    background-position: center center;
	    background-color: aquamarine;
			border-width: 2px 2px 2px 2px;
			border-color: black;
			border-style: ;
			width:65px;
			height:65px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin: 80px 80px;
			float:left;
}
.divying{
	/*background-image: url(img/图片2.png);*/
	    background-position: center center;
			border-width: 2px 2px 2px 2px;
			border-color: black;
			border-style: ;
			width:100px;
			height:300px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin: 0 1000px;
			visibility: hidden;
}
			.img{
				width:240px;
				height:400px;
				background: black;
				display: inline-block;
				margin: 10px;
				background-size:cover ;
				background-repeat:no-repeat ;
				transition: 2s;
			}
			.img:hover{
				background-position: center center;
			}
			.container{
				text-align: center;
				margin-top: 100px;
				
			}
			.img1{
				background-image:url(img/zq-lee-Q6H4SwjsAdI-unsplash.jpg) ;
				
			}
			.img2{
				background-image:url(img/andras-kovacs-22vjbap2NvU-unsplash.jpg) ;
				
			}
			.img3{

				background-image:url(img/masaaki-komori-Lu9z9qS8I_Q-unsplash.jpg) ;
				
			}
					/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: large;
}
 
/* 链接颜色修改 */
.topnav a:hover {
  background-color: beige;
  color: brown;
}
.footer {
  padding: 20px;
  text-align: center;
  background: navy;
  margin-top: 20px;
}
		</style>
	</head>
	<body>
			<div class="topnav">
<a href="#mao1">大堡礁</a>
 <a href="#mao2">海星</a>
  <a href="#mao3">海马</a>
  <a href="#mao4"  style="float:right">保护，我们在行动</a>
  <!--<a href="http://www.miluo.gov.cn/" style="float:right">了解更多</a>-->
</div>
        <div class="divf3">  <div class="divf2"><div class="divf"> 三层嵌套</div> </div> </div> 
      <div class="div1">
        	
       </div>
		<div class="container">

			<div class="img img1"></div>
			<div class="img img2"></div>
			<div class="img img3"></div>
		</div>
	<div class="div2">	<iframe class="markdown-player"  
  
 src="//player.bilibili.com/player.html?aid=23239023&bvid=BV1AW411F76w&cid=38691411&page=4"
  
width="800" height="300" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" auto></iframe>
</div>
<a name="mao1">
<div class="div2" style="color: white;"><h1>大堡礁</h1>（英文：The Great Barrier Reef，法文：Grande barrière de corail），是世界最大最长的珊瑚礁群，位于南半球，它纵贯于澳大利亚的东北沿海，北从托雷斯海峡，南到南回归线以南，绵延伸展共有2011公里，最宽处161公里。有2900个大小珊瑚礁岛，自然景观非常特殊。
大堡礁的南端离海岸最远有241公里，北端较靠近，最近处离海岸仅16公里。在落潮时部分珊瑚礁露出水面形成珊瑚岛。在礁群与海岸之间是一条极方便的交通海路。风平浪静时，游船在此间通过，船下连绵不断的多彩、多形的珊瑚景色，就成为吸引世界各地游客来猎奇观赏的最佳海底奇观。
大堡礁于1981年被列入世界自然遗产名录。
2017年3月科学家发现，大堡礁最原始的北部区域的大部分珊瑚礁2016年已被过热的海水杀死。往南一些，大堡礁中部的珊瑚礁2016年得以幸免，然而正在白化，这是另一场大规模死亡的潜在预兆。</div>
</a>
<div class="div4"><img src="img/图片3.png" alt="Pulpit rock"  style="width:800px;" class="fakeimg"></div>
<a name="mao2">
<div class="div2" style="color: white;"><h1>海星</h1>是棘皮动物中结构生理最有代表性的一类。体扁平，多为五辐射对称，体盘和腕分界不明显。生活时口面向下，反口面向上。腕腹侧具步带沟，沟内伸出管足。内骨骼的骨板以结缔组织相连，柔韧可曲。体表具棘和叉棘，为骨骼的突起。从骨板间突出的膜质泡状突起，外覆上皮，内衬体腔上皮，其内腔连于次生体腔，称为皮鳃，有呼吸和使代谢产物扩散到外界的作用。水管系发达。个体发育中经羽腕幼虫和短腕幼虫。
辐径1-65厘米，多数20-30厘米。腕中空，有短棘和叉棘覆盖。下面的沟内有成行的管足（有的末端有吸盘），使海星能向任何方向爬行，甚至爬上陡峭的面。低等海星取食沿腕沟进入口的食物粒。高等种类的胃能翻至食饵上进行体外消化，或整个吞入。内骨骼由石灰骨板组成。通过皮肤进行呼吸。腕端有感光点。多数雌雄异体，少数雌雄同体；有的可以无性分裂生殖。
现存种类1600种，化石种类300种，广泛分布于砂质海底、软泥海底、珊瑚礁及各种深度的海洋中。</div>
</a>
<div class="div4"><img src="img/图片4.png" alt="Pulpit rock"  style="width:800px;" class="fakeimg"></div>
<a name="mao3">
<div class="div2" style="color: white;height: 130px; "><h1>海马</h1>（拉丁学名：hippocampus），是刺鱼目海龙科暖海生数种小型鱼类的统称，是一种小型海洋动物，身长5～30厘米。因头部弯曲与体近直角而得名，头呈马头状而与身体形成一个角，吻呈长管状，口小，背鳍一个，均为鳍条组成。眼可以各自独立活动。
海马行动迟缓，却能很有效率地捕捉到行动迅速、善于躲藏的桡足类生物，分布在大西洋、欧洲、太平洋、澳大利亚。</div>
</a>
<div class="div4"><img src="img/图片5.png" alt="Pulpit rock"  style="width:800px;" class="fakeimg"></div>
<a name="mao4">
<div class="div2" style="color: white; height:40px;margin: 450px auto;">联合国教科文组织下属的政府间海洋学委员会就全球大型海洋生态系统的现状发布研究报告称，不断加剧的气候变化和人类活动导致全球大型海洋生态系统状况堪忧。1957～2012年，在全球66个大型海洋生态系统中，有64处海域的海水温度持续上升。在塑料污染方面，东亚和东南亚海域、地中海和黑海存在较高的污染风险。在海水富营养化方面，到2050年有21%的大型海洋生态系统将面临富营养化风险，这些区域主要集中在东亚、南美和非洲。此外，超过50%的全球珊瑚礁受到威胁，到2030年这一比例将达到90%。</div></a>
<div class="div4" style="margin: 200px auto;"><img src="img/图片6.png" alt="Pulpit rock"  style="width:800px;" class="fakeimg"></div>
<div class="div2" style="color: white;height: 130px; "><h1>保护海洋我们能做什么</h1>（一）低碳生活海洋吸收二氧化碳并有效减缓气候的变化，低碳生活方式不仅有助于改善全球变暖，也会减缓海洋酸化的速度。（二）保护海滩环境海边度假时，享受美景时的同时不要忘记举手投足的细节。将个人垃圾丢进垃圾箱或随身带走；不私自捕捉和伤害海洋动物；潜水时，不触碰珊瑚礁和其他海洋生物，不擅自触摸、喂食海洋生物；尽量避免购买海洋生物标本和工艺品，做一个有责任感的海边游客。关注 海洋清理类公益活动，加入实践公益清理行列。 （三）减少塑料垃圾在买东西的时候，少用一次塑料袋；每天少点一次外卖；减少塑料制品的使用，并且关注塑料用品回收项目，坚决抵制使用一次性塑料品，例如塑料瓶、塑胶袋和塑料吸管，用一些环保、可回收的替代品包装产品，从而减少排放到海洋中的塑料垃圾。（四）选用生态环保产品支持时尚品牌的环保行为，以史为鉴，广告的力量有时候不得不信。

</div>
<div class="divying"><audio controls autoplay> <source src="img/weather.M4A" type="audio/mpeg"> 您的浏览器不支持</audio></div>
<div class="footer">
  <h1 style="color: white;">感谢浏览</h1><br />
  <h3 style="color: white;">同学们，养成环保意识从小做起，让我们携手保护美丽海洋</h3>
</div>

	</body>
</html>
